<template>
  <div class="catewrapper">
    <!-- 搜索栏 -->
    <van-search
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      disabled
      @click="showPopup"
    />
    <div class="cate">

      <!-- 侧边栏 -->
      <van-sidebar
        v-model="activeKey"
        @change="sidebarChange"
      >
        <van-sidebar-item
          v-for="item in categoryList"
          :key="item.id"
          :title="item.name"
        />
      </van-sidebar>

      <!-- 右边主体内容 -->
      <ul class="catemain">
        <div>
          <img
            v-lazy="currentCategory.banner_url"
            :alt="currentCategory.name"
          >
          <h5>{{currentCategory.front_name}}</h5>
        </div>
        <!-- 分割线 -->
        <div class="hrLine">
          <div class="textArea">商品详情</div>
        </div>
        <van-grid
          :column-num="3"
          square
        >
          <van-grid-item
            v-for="item in currentCategory.subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />

        </van-grid>
      </ul>
    </div>
  </div>
</template>

<script>
import { GetCateList, GetCurrentCateGoodsList } from "@/request/api";
export default {
  data() {
    return {
      searchValue: "",
      activeKey: 0,
      //分类数据
      categoryList: [],
      //当前分类数据
      currentCategory: [],
    };
  },
  async created() {
    let res = await GetCateList();
    // console.log("分类数据", res.data);
    if (res.errno !== 0) return this.$toast.fail("请求分类数据失败！");
    let { categoryList, currentCategory } = res.data;
    this.categoryList = categoryList;
    //初始渲染需要第一个数组的数据，
    this.currentCategory = currentCategory;
  },
  components: {},

  computed: {},

  methods: {
    showPopup() {
      this.$router.push("/home/popup");
      //侧边栏点击
    },
    async sidebarChange(index) {
      // console.log(index);
      //这个categoryList里面的元素没有subCategoryList供渲染，需要请求当前分类数据。
      let currentCateId = this.categoryList[index].id;
      // console.log(currentCateId);
      let res = await GetCurrentCateGoodsList({
        params: { id: currentCateId },
      });
      // console.log("当前分类数据", res.data);
      if (res.errno !== 0) return this.$toast.fail("获取当前分类数据失败!");
      this.currentCategory = res.data.currentCategory;
    },
  },
};
</script>

<style lang='less' scoped>
.catewrapper {
  //一级路由组件
  // height: 100%;
  height: 90vh;
}
//分割线样式
.hrLine {
  height: 0.4rem;
  position: relative;
  margin-top: 0.05rem;
  background-color: #fff;

  .textArea {
    width: 28%;
    text-align: center;
    background-color: #fff;
    //垂直居中
    height: 0.4rem;
    line-height: 0.4rem;
    position: absolute;
    // 水平居中
    left: 50%;
    margin-left: -14%;
    //这里水平居中如果仅用margin，可以。但是就不能盖住线了，
    //因为线是开启定位，脱离文档流。如果线没定位那两者就同在文档流，遮盖不了。
    // margin: 0 auto;
  }
  &::before {
    content: "";
    width: 60%;
    height: 0.01rem;
    background-color: #ccc;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -0.005rem;
    margin-left: -30%;
  }
}
//侧边栏
.cate {
  display: flex;
  height: 100%;
  .van-sidebar {
    background-color: #f7f8fa;
    width: 20%;
  }
  .catemain {
    background-color: #fff;

    flex: 1;
    div {
      position: relative;
      img {
        width: 100%;
        height: 1rem;
        margin: 0 7px;
        border-radius: 5px;
        //水平 垂直 半径 颜色
        box-shadow: 0 0 6px #000;
        filter: brightness(0.6);
      }
      h5 {
        color: #fff;
        height: 0.2rem;
        line-height: 0.2rem;
        position: absolute;
        left: 0;
        top: 50%;
        //绝对定位之后宽度不再占满父元素了，需要100%才能让tac起作用
        width: 100%;
        text-align: center;
        margin-top: -0.1rem;
      }
    }
  }
}
</style>